<template>
	<div>
		<navigationBar :backType="2" navigationTitle="下单" />

		<view class="wrap paddingBottom" v-if="dataInfo">
			<view class="address-bg flex align-center just-between">
				<image class="address-img" :src="getImageURL('technician/home/confirm_address.png')" />

				<view class="address-info" @click="onChooseAddress">
					<block v-if="dataInfo.address && dataInfo.address.name">
						<view class="nickname-mobile flex align-base">
							<view class="nickname fb-30">
								{{ dataInfo.address.name }}
							</view>

							<view class="mobile f-26">
								{{ dataInfo.address.mobile }}
							</view>
						</view>

						<view class="address f-26 limit-num-line">
							{{ dataInfo.address.address }}
							{{ dataInfo.address.street_name }}
							{{ dataInfo.address.community_name }}
							{{ dataInfo.address.area }}
						</view>
					</block>

					<block v-else>
						<text class="no-address fb-30"> 请选择你的地址 </text>
					</block>
				</view>

				<image class="arrow" :src="getImageURL('common/arrow.png')" />
			</view>

			<view class="wrap-time-travel">
				<view class="wrap-item flex align-center just-between" @click="onChooseTime">
					<view class="left fb-30"> 服务时间 </view>

					<view class="value flex align-center just-end">
						<view class="time f-26">
							{{ subscribe_time_total === "" ? "请选择时间" : subscribe_time_total }}
						</view>

						<image class="arrow" :src="getImageURL('common/arrow.png')" />
					</view>
				</view>

				<view class="wrap-item flex align-center just-between">
					<view class="left fb-30"> 出行方式 </view>

					<view class="value flex align-center just-end">
						<block v-for="(item, index) in travel_list" :key="index">
							<view class="travel-item flex align-center" @click="onChooseTravel(index)">
								<image v-if="item.select" :src="getImageURL('common/choose_select.png')" />
								<image v-else :src="getImageURL('common/pay_normal.png')" />

								<view class="f-26" :class="{ active: item.select }">
									{{ item.title }}
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>

			<view class="wrap-goods-info flex align-center">
				<image class="file" :src="dataInfo.service.image" />

				<view class="info-right">
					<view class="title fb-30 limit-num-line">
						{{ dataInfo.service.name }}
					</view>

					<view class="price-time">
						<text class="price f-32"> ¥{{ dataInfo.service.price }} </text>
						<text class="time f-24"> /{{ dataInfo.service.duration_time }}分钟 </text>
					</view>

					<view class="bottom flex align-center just-between">
						<view class="peoples f-24"> 服务人员：{{ dataInfo.technician.name }} </view>

						<view class="num-bg flex align-center">
							<view class="sub flex align-center just-center" @click="onNumChange('sub')">
								<image :src="getImageURL('technician/home/confirm_num_sub.png')" />
							</view>

							<view class="num f-24">
								{{ num }}
							</view>

							<view class="add flex align-center just-center" @click="onNumChange('add')">
								<image :src="getImageURL('technician/home/confirm_num_add.png')" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="wrap-discount" v-if="travel_type === '1' && dataInfo.pare">
				<!-- <view class="wrap-item flex align-center just-between">
					<view class="left fb-30"> 卡券优惠 </view>
				</view> -->

				<view class="car-scrip">
					<view class="car-price flex align-center just-between">
						<view class="left fb-30"> 往返车费 </view>
						<view class="price f-26"> ¥{{ dataInfo.total.car_price }} </view>
					</view>

					<view class="scrip f-24">
						全程共计{{ dataInfo.pare.distance }}km， 出租出行{{ dataInfo.pare.start_distance }}公里内，
						起步{{ dataInfo.pare.start_money }}元， 里程计价{{ dataInfo.pare.mileage_price }}/公里
					</view>
				</view>

				<view class="wrap-item flex align-center just-between">
					<view class="left fb-30"> 物料费 </view>
					<view class="price f-26"> ¥{{ dataInfo.material }} </view>
				</view>
			</view>

			<view class="wrap-remarks">
				<view class="flex align-base">
					<text class="remarks-title fb-30"> 订单备注 </text>
					<text class="remarks-tips f-24"> (选填) </text>
				</view>

				<view class="remarks-input-bg">
					<textarea class="f-30" maxlength="20" v-model="remarks" />
					<view class="remarks-input-limit f-24"> {{ remarks.length }}/20 </view>
				</view>
			</view>

			<view class="wrap-pay-methods">
				<payMethods :showMethods="1" :status.sync="payStatus" />
			</view>
		</view>

		<view class="footer safe-area flex align-center just-between" v-if="dataInfo">
			<view class="total-price fb-30 flex align-center">
				<text class="total"> 合计： </text>
				<text class="price">
					{{ dataInfo.total.total_price }}
				</text>
			</view>
			<view class="pay-btn f-30" @click="onPay"> 立即支付 </view>
		</view>

		<appointmentTime
			:isShow.sync="isShowTime"
			:technicianID="technicianID"
			:serviceID="serviceID"
			:num="num"
			@selectTime="onSelectTime"
		/>
	</div>
</template>

<script>
	import { getConfirmOrder, createOrder } from "@/API/technician.js";
	import payMethods from "@/subPages/components/payMethods/payMethods.vue";
	import appointmentTime from "@/subPages/components/appointmentTime/appointmentTime.vue";
	export default {
		components: {
			payMethods,
			appointmentTime,
		},
		data() {
			return {
				serviceID: "", //服务ID
				technicianID: "", //技师ID
				address_id: "", //地址ID
				travel_type: "1", //出行方式 1:出租车 2:地铁/公交
				num: 1, //服务数量
				subscribe_time: "", //预约时间
				subscribe_time_total: "", //预约时间总数
				travel_list: [
					{ title: "出租车", select: true, type: "1" },
					{ title: "公交/地铁", select: false, type: "2" },
				], //出行方式列表

				remarks: "", //备注
				payStatus: "", //支付方式

				dataInfo: null, //订单信息

				isShowTime: false, //是否显示时间选择
			};
		},
		onLoad(options) {
			this.serviceID = options.serviceID;
			this.technicianID = options.technicianID;
			this.getData();
		},
		onReady() {
			uni.$on("changeAddress", (address) => {
				this.address_id = address.id;
				this.getData();
			});
			uni.$on("defaultAddressDelete", () => {
				this.address_id = "";
				this.getData();
			});
		},
		onUnload() {
			uni.$off("changeAddress");
			uni.$off("defaultAddressDelete");
		},
		watch: {
			num() {},
		},
		methods: {
			/**
			 * 切换地址
			 */
			onChooseAddress() {
				let address_id = this.address_id;
				if (this.dataInfo.address && this.dataInfo.address.id) {
					address_id = this.dataInfo.address.id;
				}
				uni.navigateTo({
					url: `/subPages/technician/mine/addressList?from=order&address_id=${address_id}`,
				});
			},
			/**
			 * 选择预约时间
			 */
			onChooseTime() {
				this.isShowTime = true;
			},
			/**
			 * 选择出行方式
			 */
			onChooseTravel(index) {
				this.travel_list.forEach((item, i) => {
					item.select = i === index;
				});
				this.travel_type = this.travel_list[index].type;
				this.getData();
			},
			/**
			 * 数量修改
			 */
			onNumChange(type) {
				if (type === "sub") {
					if (this.num > 1) {
						this.num--;
						this.getData();
					}
				} else if (type === "add") {
					this.num++;
					this.getData();
				}
			},
			onSelectTime(info) {
				this.subscribe_time = info.time;
				this.subscribe_time_total = info.total;
				this.getData();
			},
			/**
			 * 立即支付
			 */
			onPay() {
				if (this.dataInfo.address === null) {
					this.$st.show("请选择地址");
					return;
				}
				if (this.subscribe_time_total === "") {
					this.$st.show("请选择预约时间");
					return;
				}
				createOrder({
					service_id: this.serviceID,
					technician_id: this.technicianID,
					address_id: this.dataInfo.address.id,
					travel_type: this.travel_type,
					num: this.num,
					subscribe_time: this.subscribe_time,
					remarks: this.remarks,
					pay_type: this.payStatus,
					pay_method: this.$filters.getPlatform(),
				}).then((res) => {
					if (this.payStatus == 1) {
						//微信支付
						this.$filters.onWeixinPay(res, (type) => {
							this.paySuccessNext();
						});
					} else if (this.payStatus == 2) {
						//余额支付 直接支付成功
						this.paySuccessNext();
					}
				});
			},
			//支付成功之后跳转
			paySuccessNext() {
				uni.redirectTo({
					url: `/subPages/technician/home/payFinish`,
				});
			},
			/**
			 * 网络请求
			 */
			getData() {
				getConfirmOrder({
					service_id: this.serviceID,
					technician_id: this.technicianID,
					address_id: this.address_id,
					travel_type: this.travel_type,
					num: this.num,
					subscribe_time: this.subscribe_time,
				}).then((res) => {
					const model = res.data;
					this.dataInfo = model;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 140rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.left {
			color: $title-color;
		}

		> view {
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 0 30rpx;
			box-sizing: border-box;

			.wrap-item {
				width: 100%;
				height: 90rpx;
				border-bottom: 2rpx solid #ececec;

				&:last-child {
					border-bottom: none;
				}

				.value {
					width: 500rpx;
					height: 60rpx;
					flex-wrap: wrap;

					.time {
						margin-right: 20rpx;
						color: #999999;
					}

					.travel-item {
						margin-right: 30rpx;

						&:last-child {
							margin-right: 0;
						}

						> image {
							width: 26rpx;
							height: 26rpx;
						}
						> view {
							margin-left: 8rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.address-bg {
			height: 124rpx;

			.address-img {
				width: 64rpx;
				height: 64rpx;
			}

			.address-info {
				margin-left: 18rpx;
				flex: 1;
				margin-right: 20rpx;
				overflow: hidden;

				.nickname-mobile {
					width: 100%;
					overflow: hidden;

					.nickname {
						color: $title-color;
					}
					.mobile {
						margin-left: 16rpx;
						color: #999999;
					}
				}

				.address {
					margin-top: 8rpx;
					--limit-num: 1;
					color: $title-color;
				}

				.no-address {
					color: $title-color;
				}
			}
		}
		.price {
			color: $price-color;
		}

		.wrap-time-travel {
			margin-top: 20rpx;
		}

		.wrap-discount {
			margin-top: 20rpx;

			.car-scrip {
				border-bottom: 2rpx solid #ececec !important;
				padding: 30rpx 0;
				width: 100%;
				overflow: hidden;
			}
			.car-price {
				width: 100%;
				overflow: hidden;
			}
			.scrip {
				margin-top: 20rpx;
				color: #999999;
				line-height: 1.4em;
			}
		}

		.wrap-remarks {
			padding: 30rpx;
			margin-top: 20rpx;

			.remarks-title {
				color: $title-color;
			}

			.remarks-tips {
				margin-left: 15rpx;
				color: #999999;
			}

			.remarks-input-bg {
				margin-top: 20rpx;
				width: 100%;
				height: 240rpx;
				background-color: #f7f8fa;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				z-index: 1;
				padding: 20rpx;
				box-sizing: border-box;

				textarea {
					width: 100%;
					height: 100%;
					color: $title-color;
				}

				.remarks-input-limit {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					color: #999999;
					z-index: 2;
				}
			}
		}

		.wrap-goods-info {
			margin-top: 20rpx;
			padding: 30rpx;

			.file {
				width: 140rpx;
				height: 140rpx;
				border-radius: 18rpx;
				overflow: hidden;
			}
			.info-right {
				--limit-num: 1;
				margin-left: 20rpx;
				flex: 1;
				overflow: hidden;

				.title {
					color: #010101;
				}
				.bottom {
					margin-top: 20rpx;
					width: 100%;
					overflow: hidden;

					.peoples {
						color: #999999;
					}

					.num-bg {
						overflow: hidden;
						> view {
							height: 38rpx;
							line-height: 38rpx;
							text-align: center;
							overflow: hidden;
						}
						.sub {
							width: 38rpx;
							border-radius: 10rpx;
							border: 2rpx solid $theme-color;
							> image {
								width: 16rpx;
								height: 2rpx;
							}
						}

						.num {
							width: 54rpx;
							color: $title-color;
						}

						.add {
							width: 38rpx;
							background-color: $theme-color;
							border-radius: 10rpx;

							> image {
								width: 16rpx;
								height: 16rpx;
							}
						}
					}
				}

				.price-time {
					margin-top: 20rpx;
					width: 100%;

					.price {
						color: $price-color;
					}
					.time {
						margin-left: 9rpx;
						color: #999999;
					}
				}
			}
		}

		.wrap-pay-methods {
			margin-top: 20rpx;
		}
	}
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		z-index: 10;
		background-color: #fff;

		.total-price {
			margin-left: 48rpx;
			flex: 1;
			margin-right: 20rpx;
			overflow: hidden;

			.total {
				color: $title-color;
				margin-right: 10rpx;
			}
			.price {
				color: $price-color;
			}
		}
		.pay-btn {
			width: 186rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: $grad-theme-color;
			color: $bg-text-color;
			margin-right: 22rpx;
			border-radius: 40rpx;
			overflow: hidden;
		}
	}
</style>
